<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, user-scalable=no">
    <title>pupper web joystick</title>
    <script src="//unpkg.com/vue/dist/vue.js"></script>
    <script src="//unpkg.com/element-ui@2.13.2/lib/index.js"></script>
    <style>
        @import url("//unpkg.com/element-ui@2.13.2/lib/theme-chalk/index.css");
    </style>
    <script src="lib/nipplejs.js"></script>
    <style>
        .harf {
            width: 40%;
        }

        .inline {
            display: inline-block;
        }

        .but {
            height: 4em;
            width: 4em;
            position: absolute;
            left: 50%;
        }

        .lable {
            position: absolute;
        }

        .el-card__body {
            padding: 0;
        }

        .nip {
            height: 9em;
            width: 23em;
            position: relative;
        /*    add position to enable nipple in box*/
        }

        .bord {
            border: solid;
            border-width: 3px;
            border-color: black;
        }
    </style>
</head>
<body>
<div id="app">
    <div>
        <h3 class="inline">I'm a joystick</h3>
        <div class="inline">
            <el-tooltip class="item" effect="light"
                        content="Press to toggle active mode and deactivate mode."
                        placement="bottom-start">
                <el-button>L1</el-button>
            </el-tooltip>
            <el-switch
                    v-model="value1"
                    active-text="active"
                    inactive-text="deactivate">
            </el-switch>
            <el-switch
                    v-model="value2"
                    active-text="Rest"
                    inactive-text="Trot">
            </el-switch>
            <el-tooltip class="item" effect="light"
                        content="Press to transition between Rest mode and Trot mode."
                        placement="bottom-start">
                <el-button>R1</el-button>
            </el-tooltip>
        </div>
    </div>
    <div>
        <el-card class="box-card harf inline">
            <div>
                <span class="lable">D-Pad</span>
                <el-row>
                    <el-col :span="8">
                        <el-button style="visibility:hidden;">
                            ↓
                        </el-button>
                    </el-col>
                    <el-col :span="8">
                        <el-tooltip class="item" effect="light"
                                    content="raises and lowers the body."
                                    placement="bottom-start">
                            <el-button>↑</el-button>
                        </el-tooltip>
                    </el-col>
                    <el-col :span="8">
                        <el-button style="visibility:hidden;">
                            ↓
                        </el-button>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-tooltip class="item" effect="light"
                                    content="rolls the body left/right."
                                    placement="bottom-start">
                            <el-button>←</el-button>
                        </el-tooltip>
                    </el-col>
                    <el-col :span="8">
                        <el-button style="visibility:hidden;">
                            ↓
                        </el-button>
                    </el-col>
                    <el-col :span="8">
                        <el-tooltip class="item" effect="light"
                                    content="rolls the body left/right."
                                    placement="bottom-start">
                            <el-button>→</el-button>
                        </el-tooltip>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="8">
                        <el-button style="visibility:hidden;">
                            ↓
                        </el-button>
                    </el-col>
                    <el-col :span="8">
                        <el-tooltip class="item" effect="light"
                                    content="raises and lowers the body."
                                    placement="bottom-start">
                            <el-button>↓</el-button>
                        </el-tooltip>
                    </el-col>
                    <el-col :span="8">
                        <el-button style="visibility:hidden;">
                            ↓
                        </el-button>
                    </el-col>
                </el-row>

            </div>
        </el-card>
        <el-tooltip class="item but inline" effect="light"
                    content="Press it three times to complete a full hop."
                    placement="bottom-start">
            <el-button>“X”</el-button>
        </el-tooltip>
    </div>

    <el-card class="box-card inline nip" id="left-joy">
        <div slot="header" class="clearfix">
            <span>Left joystick</span>
        </div>
        <div>
            <el-tooltip class="item" effect="light"
                        content="moves the robot forward/backwards when in Trot mode."
                        placement="bottom-start">
                <el-button>↑</el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="light"
                        content="moves the robot forward/backwards when in Trot mode."
                        placement="bottom-start">
                <el-button>↓</el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="light"
                        content="moves the robot left/right when in Trot mode."
                        placement="bottom-start">
                <el-button>←</el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="light"
                        content="moves the robot left/right when in Trot mode."
                        placement="bottom-start">
                <el-button>→</el-button>
            </el-tooltip>
        </div>
    </el-card>
    <el-card class="box-card inline nip" id="right-joy">
        <div slot="header" class="clearfix">
            <span>Right joystick</span>
        </div>
        <div>
            <el-tooltip class="item" effect="light"
                        content="pitches the robot forward and backward."
                        placement="bottom-start">
                <el-button>↑</el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="light"
                        content="pitches the robot forward and backward."
                        placement="bottom-start">
                <el-button>↓</el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="light"
                        content="turns the robot left and right."
                        placement="bottom-start">
                <el-button>←</el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="light"
                        content="turns the robot left and right."
                        placement="bottom-start">
                <el-button>→</el-button>
            </el-tooltip>
        </div>
    </el-card>
</div>
<script>
    let Main = {
        data() {
            return {
                value1: true,
                value2: true
            }
        }
    };

    let TT = Vue.extend(Main)
    new TT().$mount('#app')
</script>
<script>
    let left = nipplejs.create({
        zone: document.getElementById('left-joy'),
        color: 'blue'
    });
    let right = nipplejs.create({
        zone: document.getElementById('right-joy'),
        color: 'red',
        mode:'static',
        position:{top: '250px', left: '150px'}
    });
</script>
</body>
</html>